<template>
  <a-form-item
    :key="element.metaRefresh"
    :name="element.field"
    :label="element.componentProps.label"
    :rules="element.componentProps.rules"
  >
    <div v-if="element.render">
      <component :is="element.render"></component>
    </div>
    <a-radio-group
      v-else
      v-model:value="element.componentProps.value"
      @change="radioChange"
    >
      <a-radio value="1" label="1">Option A</a-radio>
      <a-radio value="2" label="2">Option B</a-radio>
    </a-radio-group>
  </a-form-item>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  inject,
  watch,
  toRefs,
  reactive,
  computed,
} from "vue";
import type { LowCodeImp, ComponentImp } from "@/components/low-code/core/type";
export default defineComponent({
  name: "inputWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode: LowCodeImp = getLowCodeInstance();
    const { element } = toRefs(props);

    const radioChange = () => {
      element.value.componentProps.onChangeEvents.map(async (code: any) => {
        await lowCode.eventCenterController.fire(code);
      });
    };

    return {
      element,
      radioChange,
    };
  },
});
</script>

<style scoped></style>
